<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas id="ctx" style="border: 1px solid;" width="800" height="400"></canvas>

    <script>
        //==== 基本用法

        //获取Cavans元素
        let ctx = document.getElementById('ctx');
        //获取2d画笔
        let pen = ctx.getContext('2d');
        // pen.moveTo(100, 100);//移动画笔
        // pen.strokeStyle = 'red';  //修改画笔颜色
        // pen.lineTo(400, 100);//划线
        // pen.stroke()//描边


        // pen.lineTo(400,400);
        // pen.stroke()
        // pen.moveTo(200, 200);
        // pen.lineTo(400, 400);
        // pen.stroke()
        // pen.closePath() 

        //----- 对角线
        // 开始路径
        // pen.beginPath()
        // pen.strokeStyle = 'blue'
        // pen.moveTo(0, 0)
        // pen.lineTo(800, 400)
        // pen.moveTo(800, 0)
        // pen.lineTo(0, 400)
        // pen.stroke()

        //----- 三角形
        pen.moveTo(400, 0);
        pen.lineTo(250, 100);
        pen.lineTo(550, 100);
        // pen.lineTo(400,0);
        pen.closePath()
        pen.strokeStyle = 'green';
        pen.lineWidth = 10;//线的粗细
        pen.fillStyle = 'pink';//设置填充颜色，写在图形填充之前
        pen.fill()//填充
        pen.stroke()




    </script>


</body>

</html>